<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-17 19:58:34
 * @LastEditors: Andy
 * @LastEditTime: 2023-06-20 14:12:05
-->
<template>
    <div class="container">
        <div class="echarts" ref="main" id="main"></div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {}
    },
    methods: {
        requestOn() {
            //发起各地区农作物种植区域占比请求
            this.$axios.get('/api/cropAreasProportion').then(res => {
                // console.log(res);
                if (res.status === 200) {
                    //定义圆心位置
                    var centerData = [
                        ['12.5%', '65%'],
                        ['37.5%', '65%'],
                        ['62.5%', '65%'],
                        ['87.5%', '65%'],
                    ]
                    var seriesDate = res.data.map((item, index) => {
                        return {
                            type: 'pie',
                            center: centerData[index],  //数组的第一项是横坐标，第二项是纵坐标。
                            // radius: ['50', '60'],
                            data: [
                                {
                                    name: item.areas + '\n' + item.zb + '%',
                                    value: item.zb
                                },
                                {
                                    value: item.other
                                }
                            ],
                            label: { //设置文本样式
                                show: true,
                                position: 'center',
                                fontSize: 17,
                                fontWeight: 'bolder'
                            },
                        }
                    })
                }
                //设置配置项
                this.option = {
                    title: {
                        text: '各地区农作物种植区域占比',  //主标题
                        left: 20,
                        top: 10,
                    },
                    series: seriesDate
                }

                //3.使用echarts实列设置配置项
                this.myEschars.setOption(this.option)
            })
        },
        //屏幕自适应
        screen() {
            // console.log(111);
            //图表自适应
            this.myEschars.resize();

            //获取屏幕的宽度
            const width = document.getElementById('main').offsetWidth;
            var num = width / 100 * 4
            //设置内圆半径
            let innerRadius = num * 1.3;
            //设置外圆的半径
            let outerRadius = innerRadius * 1.3;
            var seriesDate = [1, 2, 3, 4].map(item => {
                return {
                    type: 'pie',
                    radius: [innerRadius, outerRadius],
                    label: {
                        fontSize: num * 0.5
                    }
                }
            })
            //重构this.option
            this.option = {
                title: {
                    textStyle: { fontSize: num }
                },
                series: seriesDate
            }
            this.myEschars.setOption(this.option)
        },
        init() {
            //获取res节点
            const oDiv = this.$refs.main;
            //2.创建echarts实列
            this.myEschars = this.$echarts.init(oDiv, this.theme);
        }
    },
    mounted() {
        this.init()
        //发起各地区农作物种植区域占比
        this.requestOn()
        this.screen()
        window.addEventListener('resize', this.screen)
    },
    destroyed() {
        window.removeEventListener('resize', this.screen)
    },
    watch: {
        theme() {
            // console.log(111);
            this.myEschars.dispose()
            this.init()
            //发起各地区农作物种植区域占比
            this.requestOn()
            this.screen()
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>